<template>
  <div class="kw-accordion-item" :class="{'is-active': isActive}">
    <div class="kw-accordion-item-header" @click="handleHeaderClick">
      <i class="iconfont" :class="'icon-arrow-' + (isActive? 'down': 'right')"></i>
      <slot name="title">{{title}}</slot>
    </div>
    <div class="kw-accordion-item-content" v-show="isActive">
      <slot></slot>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'kw-accordion-item',
      props: {
        title: String,
        name: {
          type: [String, Number],
          default() {
            return this._uid;
          }
        }
      },
      data() {
        return {
          contentWrapStyle: {
            height: 'auto',
            display: 'block'
          },
          contentHeight: 0
        }
      },
      computed: {
        isActive() {
          return this.$parent.activeNames.indexOf(this.name) > -1;
        }
      },
      methods: {
        handleHeaderClick() {
          this.$parent.$emit('item-click', this);
        }
      }
    }
</script>

<style lang="less">
  .kw-accordion-item {
    .kw-accordion-item-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      cursor: pointer;
      font-weight: 500;
      -webkit-transition: border-bottom-color 0.3s;
      margin-bottom: 1px;
      transition: border-bottom-color 0.3s;
      outline: none;
      color: #fff;
      background: rgba(0,0,0,0.2);
      padding: 16px;
    }
    .kw-accordion-item-content {
      padding: 16px 0;
    }
  }
</style>